<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>Rvt3js</title>
		<style>
			body { margin: 0; overflow: hidden; }
			canvas { width: 90%; height: 90% }
			.menu {
				position: fixed;
				bottom: 20px;
				right: 20px;
			}
			.button {
				display: inline-block;
				padding: 8px;
				color: #FFF;
				background-color: #555;
			}
			.button.error {
				pointer-events: none;
				background-color: red;
			}
			.button.enabled {
				background-color: rgb(18, 36, 70);
			}
			.button:hover {
				cursor: pointer;
				background-color: rgb(18, 36, 70);
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="button full-screen">
				Start VR Mode
			</div>
		</div>
		<div id="container"></div>

		<script src="js/leap.min.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
		<script src="js/controls/LeapTwoHandControls.js"></script>
		<script src="js/controls/LeapPointerControls.js"></script>
		<script src="js/controls/LeapEyeLookControls.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/controls/VRControls.js"></script>
		<script src="js/VREffect.js"></script>
		<script src="js/SubdivisionModifier.js"></script>

		<script>
			var container, camera, scene, renderer;
			var controller, controls;
			var oLoad;
			var vrEffect;
			var vrControls;
			var fullScreenButton;
			var subdivs = 0;

			init();
			animate();

			function init() {
				controller = new Leap.Controller();
				scene = new THREE.Scene();

				/* CREATE SKYBOX */
				var urlPrefix = '/rvt3js/img/sky/',
			    urls = [
			      urlPrefix + 'posx.jpg',
			      urlPrefix + 'negx.jpg',
			      urlPrefix + 'negz.jpg',
			      urlPrefix + 'posz.jpg',
			      urlPrefix + 'posy.jpg',
			      urlPrefix + 'negy.jpg'
			    ],
			    textureCube = THREE.ImageUtils.loadTextureCube(urls),
			    shader = THREE.ShaderLib['cube'],
			    uniforms = THREE.UniformsUtils.clone(shader.uniforms);
			  uniforms['tCube'].value = textureCube;

			  var skyMaterial = new THREE.ShaderMaterial({
			      fragmentShader: shader.fragmentShader,
			      vertexShader: shader.vertexShader,
			      uniforms: uniforms,
			      depthWrite: false,
			      side: THREE.DoubleSide
			    }),
			    skyboxMesh = new THREE.Mesh(new THREE.BoxGeometry(100000, 100000, 100000, 1, 1, 1), skyMaterial);
			  scene.add(skyboxMesh);
				/* END SKYBOX */

				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100000);
				camera.position.set(15000,15000,15000);

				renderer = new THREE.WebGLRenderer( { antialias: true, alpha:  true } );

				renderer.setPixelRatio(window.devicePixelRatio);
				fullScreenButton = document.querySelector( '.full-screen' );
				if (navigator.getVRDevices === undefined ){
					fullScreenButton.innerHTML = 'Your browser doesn\'t support WebVR';
					fullScreenButton.classList.add('error');
				}
				vrControls = new THREE.VRControls( camera );
				vrEffect = new THREE.VREffect( renderer, function (error) {
					fullScreenButton.innerHTML = error;
					fullScreenButton.classList.add('error');
				});

				fullScreenButton.onclick = function() {
					vrEffect.setFullScreen( true );
				};

				renderer.setClearColor( 0xf0f0f0 );
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.sortObjects = false;

				container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false);



				oLoad = new THREE.ObjectLoader();
				oLoad.load('js/models/sample.rvt.js', function ( object ) {
					/* BETA FEATURE */
					scene.add(object);
					scene.children.forEach(function(Scene){
						if (Scene instanceof THREE.Scene) {
							Scene.children.forEach(function(obj3d){
								if(obj3d instanceof THREE.Object3D) {
									obj3d.children.forEach(function(mesh){
										if(mesh instanceof THREE.Mesh){
											if (mesh.name.indexOf('TopographySurface') != -1){
												console.log('got a topo');
												var finalGeo = mesh.geometry;
												finalGeo.mergeVertices();
												var modifier = new THREE.SubdivisionModifier(subdivs);
												modifier.modify(finalGeo);
											}
										}
									})
								}
							})
						};
					});
					/* END BETA FEATURE */
					console.log('load complete!');
				});

				// Lights
				var ambient = new THREE.AmbientLight( 0x404040 );
					scene.add( ambient);
				var directional = new THREE.DirectionalLight( 0xffffff, 1 );
					directional.position.set(0,1,0);
					directional.castShadow = true;
					directional.shadowMapWidth = 2048;
					directional.shadowMapHeight = 2048;
					var d = 10000;
					directional.shadowCameraLeft = -d;
					directional.shadowCameraRight = d;
					directional.shadowCameraTop = d * 2;
					directional.shadowCameraBottom = -d * 2;

					directional.shadowCameraNear = 1000;
					directional.shadowCameraFar = 20000;

					scene.add(directional);

				controller.connect(function(){
					console.log('connected!');
				});
				twoHand();
			}

			function onWindowResize(){
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				vrEffect.setSize(window.innerWidth, window.innerHeight);
			}

      function animate(){
				requestAnimationFrame( animate );
				render();
      }

			function render(){
				controls.update();
				vrControls.update();
				vrEffect.render(scene, camera);
			}

			function pointer(){
				controls = new THREE.LeapPointerControls(camera, controller);
					controls.size = 300;
					controls.speed = .03;
					controls.dampening = .99;
					controls.target = new THREE.Vector3(0,100,0);
			}

			function twoHand(){
				controls = new THREE.LeapTwoHandControls( camera, controller );
					controls.translationSpeed = 180;
					controls.rotationSpeed = 3;
					controls.pinchThreshold = 0.9;
					controls.transSmoothing = 1000;
					controls.rotationSmoothing = 1;
			}

			function eyeLook(){
				controls = new THREE.LeapEyeLookControls( camera, controller, scene);
					controls.lookSize = 15;
					controls.lookMass = 15;

					var geo   = new THREE.CubeGeometry( 1 , 1 , 1 );
					var mat   = new THREE.MeshNormalMaterial();
					var mesh  = new THREE.Mesh( geo , mat );

					controls.addLookMarker( mesh );
			}

			function mouse() {
				controls = new THREE.OrbitControls( camera, renderer.domElement );
					controls.enableDamping = true;
					controls.dampingFactor = .75;
					controls.enableZoom = true;
			}

		</script>
	</body>
</html>
